/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use 'sass:map';
@use 'sass:math';

@use '../internal/styles/tokens' as awsui;
@use '../internal/styles' as styles;
@use '../column-layout/styles.scss' as mixins;

$gutter: awsui.$space-tile-gutter;

.root {
  @include styles.styles-reset;
  @include styles.text-wrapping;
  display: block;
}

@mixin make-column($nColumns) {
  $nColumns: math.div(12, $nColumns);
  $p: math.percentage(math.div(1, $nColumns));
  flex: 0 0 calc(#{$p} - #{$gutter / 2});
  max-inline-size: calc(#{$p} - #{$gutter / 2});
}

.tile-container {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border-block: awsui.$border-width-field solid awsui.$color-border-input-default;
  border-inline: awsui.$border-width-field solid awsui.$color-border-input-default;
  border-start-start-radius: awsui.$border-radius-tiles;
  border-start-end-radius: awsui.$border-radius-tiles;
  border-end-start-radius: awsui.$border-radius-tiles;
  border-end-end-radius: awsui.$border-radius-tiles;
  background: awsui.$color-background-input-default;
  padding-block: awsui.$space-xs;
  padding-inline: awsui.$space-scaled-m;

  @include styles.with-motion {
    transition:
      border-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick,
      background-color awsui.$motion-duration-transition-quick awsui.$motion-easing-transition-quick;
  }

  &.refresh {
    padding-block: awsui.$space-xs;
    padding-inline: awsui.$space-s;
    &.selected:not(.disabled):not(.readonly) {
      box-shadow: inset 0 0 0 awsui.$border-width-field awsui.$color-border-item-focused;
    }
  }

  &.has-metadata {
    padding-block-end: awsui.$space-s;
    &.refresh {
      padding-block-end: awsui.$space-scaled-s;
    }
  }

  &.selected {
    border-block: awsui.$border-width-field solid awsui.$color-border-item-selected;
    border-inline: awsui.$border-width-field solid awsui.$color-border-item-selected;
    background: awsui.$color-background-item-selected;
  }

  &.disabled {
    border-block: awsui.$border-width-field solid awsui.$color-border-tiles-disabled;
    border-inline: awsui.$border-width-field solid awsui.$color-border-tiles-disabled;
    background: awsui.$color-background-tiles-disabled;
  }

  &.readonly {
    @include styles.form-readonly-element;
  }
}

.columns {
  display: flex;
  flex-wrap: wrap;
  margin-block: calc(#{$gutter} / -4);
  margin-inline-start: calc(#{$gutter} / -4);
  margin-inline-end: calc(#{$gutter} / -4);

  @each $i, $columns-setting in mixins.$column-breakpoint-spans {
    &.column-#{$i} {
      & > .tile-container {
        margin-block: calc((#{$gutter} / 4));
        margin-inline: calc((#{$gutter} / 4));
        box-sizing: border-box;
        @include make-column(12);
        &.breakpoint-xs {
          @include make-column(map.get($columns-setting, 'xs'));
        }
        &.breakpoint-xxs {
          @include make-column(map.get($columns-setting, 'xxs'));
        }
      }
    }
  }
}

.control {
  flex-grow: 1;
  margin-block-end: awsui.$space-s;

  &.no-image {
    margin-block-end: 0;
  }
}

.image {
  text-align: center;

  // This manipulates a (optionally) passed img element for the image attribute of
  // an item. We do not have control over the img element.
  // stylelint-disable-next-line selector-max-type
  & > img {
    max-inline-size: 100%;
  }

  &.disabled {
    // stylelint-disable-next-line selector-max-type
    & > img {
      opacity: 0.3;
    }
  }
}
